<!-- 组件说明 -->
<template>
  <div class="inviteWrap">
    <goback
      :title="'INVITE'"
      :rightTop="rightTop"
      :ifTransparent="false"
    ></goback>
    <div class="container clearfix">
      <div class="li">
        <div class="title">
          Method 1: QR code
        </div>
        <div class="imgwrap">
          <img v-show="qrcodeUrl" :src="qrcodeUrl" alt="" />
        </div>
      </div>
      <div class="li">
        <div class="title">
          Method 2: Invitation code
        </div>
        <div class="code underline">
          {{ inviteCode }}
          <p class="btn" v-copy="inviteCode">Copy</p>
        </div>
      </div>
      <div class="li last">
        <div class="title">
          Method 3: SMS
        </div>
        <div class="sms underline">
          <input
            placeholder="Please enter phone number"
            type="number"
            v-model="phone"
          />
          <p class="btn" @click.stop="sendFn">Send</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
import { ifLogin, utilGotoLogin } from "@/utils/index.js";
import { mapState } from "vuex";
import userController from "../../../api/user-controller/user-controller";

export default {
  components: {},
  name: "percenterInvite",
  data() {
    return {
      rightTop: {
        title: "RECORD",
        name: "percenterInviteRecord"
      },
      inviteCode: "",
      qrcodeUrl: "",
      phone: ""
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user
  }),
  methods: {
    sendFn() {
      let zs = this;
      if (zs.phone == "") {
        this.$notify({
          type: "warning",
          message: "Please enter phone number first!"
        });
        return;
      }
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.userController
        .userSendSmsInviteinfo({
          userId: zs.userStoreData.userId,
          msmCode: zs.inviteCode,
          phone: zs.phone
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code == 200) {
            zs.$toast("Send success");
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    pageinit() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      let zs = this;
      this.api.userController
        .userObtainUserInviteinfo({
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            zs.inviteCode = res.data.data.inviteCode;
            QRCode.toDataURL(res.data.data.inviteQRCode?res.data.data.inviteQRCode:'inviteQRCode IS NULL')
              .then(url => {
                console.log(url);
                zs.qrcodeUrl = url;
              })
              .catch(err => {
                console.error(err);
              });
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    // 路有跳转
    goto(name) {
      this.$router.push({
        name
      });
    },
    fnstop() {
      return false;
    }
  },
  mounted() {
    this.pageinit();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");
.inviteWrap {
  .container {
    padding: 1.44rem 0.3rem 0;
    .underline {
      height: 0.6rem;
      line-height: 0.6rem;
      padding: 0;
      border-bottom: 1px solid rgba(112, 112, 112, 1);
      position: relative;
    }
    .li {
      &:last-child {
        margin-top: 1rem;
      }
      .title {
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.28rem;

        font-weight: bold;
        color: #333333;
        opacity: 1;
        margin-bottom: 0.4rem;
        &.last {
          margin-bottom: 0.1rem;
        }
      }
      .imgwrap {
        padding: 0;
        margin: 0.5rem auto 0;
        padding-bottom: 1rem;
        height: 3rem;
        img {
          width: 3rem;
          height: 3rem;
          background-color: #ccc;
          display: block;
          margin: 0 auto;
        }
      }
      .code {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: left;
        color: rgba(0, 147, 255, 1);
        font-size: 0.28rem;
      }
      .btn {
        position: absolute;
        right: 0;
        bottom: 0.1rem;
        height: 0.4rem;
        line-height: 0.4rem;
        cursor: pointer;
        color: rgba(51, 51, 51, 1);
        font-weight: bold;
        font-size: 0.28rem;
      }

      .sms {
        input {
          display: block;
          margin: 0;
          padding: 0;
          outline: none;
          border: none;
          width: 100%;
          color: rgba(51, 51, 51, 1);
          font-weight: bold;
        }
      }
    }
  }
}
</style>
